<template>
    <view class="storePage d-flex f-column" :style="{ '--color': color }">
        <status-bar title="选择门店"></status-bar>
        <view class="search viewbox bgf8 margin20 d-flex a-center">
            <view class="d-flex a-center" @click="toUrl('/orderPage/Addresslist/cityList')">
                <text class="size26 bold p-right6">{{ cityName }}</text>
                <text class="iconfont icon-xiasanjiaoxing h6"></text>
            </view>
            <view class="line"></view>
            <text class="iconfont icon-btn_search m-right10"></text>
            <input class="flex-1 size28" v-model="keywords" confirm-type="search" placeholder="输入门店名称或地址搜索" @focus="isFlag = false" @confirm="handleConfirm" />
            <view class="size28 color_44 p-left20" @click="handleCancel" v-if="!isFlag">取消</view>
        </view>
        <block v-if="isFlag">
            <!-- 地图组件 -->
            <map id="myMap" :longitude="longitude" :latitude="latitude" :markers="markers" show-location v-if="!isFold">
                <!-- 覆盖在原生组件上的图片视图 -->
                <!-- <cover-image class="control" :src="$pop.staticImg('backOrigin.png')" @click="handleReturn"></cover-image> -->
            </map>
            <view class="p-left8 p-bot24 p-top24 p-re">
                <u-tabs :list="tabList" :current="current" :lineColor="color" @click="tabClick"></u-tabs>
                <view class="toggle padding20 color_66 p-ab" @click="isFold = !isFold">
                    <text class="m-right10">{{ isFold ? '展开' : '收起' }}地图</text>
                    <text class="iconfont h6" :class="isFold ? 'icon-xiangxia' : 'icon-xiangshang'"></text>
                </view>
            </view>
            <view class="flex-1 bgf8 padding30" style="overflow-y: auto">
                <view
                    class="bor_radius_18 padding40-30 m-bot20 d-flex p-re"
                    :class="item.can_choose == 1 ? 'bgwhite' : 'notSelected'"
                    @click="handleSelect(item)"
                    v-for="(item, index) in nearList"
                    :key="index"
                >
                    <view class="label p-ab thmeBg white padding2-14 bor_radius_6" v-if="!index && !is_collect">距离最近</view>
                    <view class="flex-1 p-right30">
                        <view class="size30 bold m-bot20" :class="item.can_choose == 1 ? 'color_33' : 'color_66'">
                            {{ item.name }}
                        </view>
                        <view class="h6 color_99">{{ item.address }}</view>
                        <view class="h6 color_99 m-top10" v-if="item.runTime">营业时间：{{ item.runTime }}</view>
                    </view>
                    <view class="text-right">
                        <view class="size26 color_66" v-if="item.distance">{{ item.distance }}km</view>
                        <view class="m-top40">
                            <view class="btn bgf8 m-right30" v-if="item.phone" @click.stop="Call(item)">
                                <text class="iconfont icon-dianhua size30"></text>
                            </view>
                            <view class="btn bgf8" @click.stop="locate(item)">
                                <text class="iconfont icon-wodeluxian size30"></text>
                            </view>
                        </view>
                    </view>
                </view>

                <emptys v-if="noData" title="暂无相关的门店数据哦~"></emptys>
            </view>
        </block>
        <view class="flex-1 bgf8 padding30" style="overflow-y: auto" v-else>
            <view class="bgwhite bor_radius_18 padding40-30 m-bot20 d-flex" @click="handleSelect(item)" v-for="(item, index) in searchList" :key="index">
                <view class="flex-1 p-right30">
                    <view class="size30 color_33 bold m-bot20">{{ item.name }}</view>
                    <view class="h6 color_99">{{ item.address }}</view>
                    <view class="h6 color_99 m-top10" v-if="item.runTime">营业时间：{{ item.runTime }}</view>
                </view>
                <view class="text-right">
                    <view class="size26 color_66" v-if="item.distance">{{ item.distance }}km</view>
                    <view class="m-top40">
                        <view class="btn bgf8 m-right30" v-if="item.phone" @click.stop="Call(item)">
                            <text class="iconfont icon-dianhua size30"></text>
                        </view>
                        <view class="btn bgf8" @click.stop="locate(item)">
                            <text class="iconfont icon-wodeluxian size30"></text>
                        </view>
                    </view>
                </view>
            </view>

            <emptys v-if="noData1" empty="search" title="暂无相关结果，请尝试更换关键字"></emptys>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    // import QQMapWX from '@/common/qqmap-wx-jssdk.min.js'
    // let qqmapsdk
    export default {
        data() {
            return {
                cityName: '重庆',
                keywords: '',
                isFlag: true, // 搜索中为false
                isFold: false,
                longitude: 0, // (距离最近)标记点的经纬度
                latitude: 0,
                markers: [],
                tabList: [
                    {
                        name: '附近'
                    },
                    {
                        name: '收藏'
                    }
                ],
                current: 0,
                nearList: [],
                searchList: [],
                is_collect: '',
                noData: false,
                noData1: false,
                shopsid: '',
                rescue: 0 // 1是线下救援
            };
        },
        computed: {
            ...mapState(['position', 'CityInfo', 'color', 'bid'])
        },
        onLoad(opt) {
            if (opt.shopsid) this.shopsid = opt.shopsid;
            if (opt.rescue) this.rescue = opt.rescue;
            // qqmapsdk = new QQMapWX({
            //     key: ''
            // })
        },
        async onShow() {
            // if(this.position.longitude == 0) await this.$pop.getLocation()
            await this.$pop.getLocation();
            if (this.CityInfo) this.cityName = this.CityInfo.name;
            this.getList();
        },
        methods: {
            getList() {
                this.noData = false;
                this.markers = [];
                this.$http
                    .post({
                        url: '/singleSaleApi/shopList',
                        data: {
                            // bussId: '',
                            sort_type: 'distance',
                            is_collect: this.is_collect,
                            city: this.cityName,
                            shopsid: this.shopsid
                        }
                    })
                    .then((res) => {
                        this.nearList = res.data || [];
                        if (!this.nearList.length) return (this.noData = true);
                        // 添加标记点
                        this.markers = this.nearList.map((item) => {
                            return {
                                id: parseFloat(item.shop_id),
                                latitude: parseFloat(item.pointy),
                                longitude: parseFloat(item.pointx),
                                iconPath: this.$imgUrls(item.logo),
                                width: 30,
                                height: 30,
                                callout: {
                                    content: item.name,
                                    borderRadius: 2,
                                    padding: 5,
                                    display: 'ALWAYS'
                                }
                            };
                        });
                        this.longitude = this.markers[0].longitude;
                        this.latitude = this.markers[0].latitude;
                    });
            },
            tabClick({ index }) {
                this.is_collect = index || '';
                this.current = index;
                this.getList();
            },
            handleCancel() {
                this.isFlag = true;
                this.keywords = '';
                this.searchList = [];
            },
            locate(item) {
                uni.openLocation({
                    latitude: parseFloat(item.pointy),
                    longitude: parseFloat(item.pointx),
                    name: item.name,
                    address: item.address,
                    complete(res) {
                        console.log(res);
                    }
                });
            },
            handleConfirm(e) {
                if (!e.detail.value) return;
                this.noData1 = false;
                this.$http
                    .post({
                        url: '/singleSaleApi/shopList',
                        data: {
                            // bussId: '',
                            sort_type: 'distance',
                            keywords: this.keywords,
                            city: this.cityName,
                            shopsid: this.shopsid
                        }
                    })
                    .then((res) => {
                        this.searchList = res.data || [];
                        if (!this.searchList.length) this.noData1 = true;
                    });

                // let that = this
                // qqmapsdk.search({ // 周边搜索
                //     keyword: e.detail.value,
                //     location: `${that.latitude},${that.longitude}`,
                //     region: that.cityName,
                //     auto_extend: '0', // 不扩大范围
                //     success(res){
                //         that.searchList = res.data || []
                //     }
                // })
            },
            handleSelect(item) {
                if (!item.can_choose) return;
                if (this.rescue == 1) return this.toUrl(`/pages/store/storeIndex?shop_id=${item.shop_id}`);
                if (this.bid == 'TEsikjur9dC8j1NyKK4mXA==') return this.toUrl(`/orderPage/order/serviceReserve?shop_id=${item.shop_id}&title=${item.name}`);
                let pages = getCurrentPages();
                console.log(pages, 'pages');
                let prevPage = pages[pages.length - 2];
                console.log(prevPage, 'prevPage');
                prevPage.onLoad({
                    shop_id: item.shop_id
                });
                this.$back();
                // this.$rectTo('/pages/classify/repast?shop_id=' + item.shop_id)
            },
            handleReturn() {
                // 必须申请调用getLocation
                uni.createMapContext('myMap', this).moveToLocation({
                    longitude: this.position.longitude,
                    latitude: this.position.latitude
                });
            },
            reverseGeocoder(lat, lng) {
                let that = this;
                qqmapsdk.reverseGeocoder({
                    // 逆地址解析(坐标转地址)
                    location: `${lat},${lng}`,
                    get_poi: 1,
                    success(res) {
                        if (res.status != 0) return that.$Toast(res.message);
                        that.cityName = res.result.ad_info.city; // 初始化要用经纬度换取城市
                        that.nearList = res.result.pois || [];
                    }
                });
            },
            regionchange(e) {
                console.log('触发', e);
                if (e.type == 'end') {
                    // 拖动结束
                    const result = e.detail.centerLocation;
                    this.reverseGeocoder(result.latitude, result.longitude);
                }
            },
            Call(Item) {
                if (this.rescue == 1) {
                    this.$http
                        .post({
                            url: '/rescueApi/saveContactLog ',
                            data: {
                                shop_id: Item.shop_id
                            }
                        })
                        .then((res) => {
                            if (res.code != 200) return this.$Toast(res.msg);
                        });
                }
                this.$common.Tel(Item.phone);
            }
        }
    };
</script>

<style lang="scss" scoped>
    .storePage {
        height: 100vh;
    }

    .search {
        height: 72rpx;
        border-radius: 36rpx;
        padding: 0 30rpx;

        .line {
            width: 1rpx;
            height: 30rpx;
            background: #999;
            margin: 0 20rpx;
        }
    }

    #myMap {
        width: 100%;
        height: 500rpx;
        position: relative;
    }

    .control {
        width: 50rpx;
        height: 50rpx;
        position: absolute;
        right: 20rpx;
        bottom: 50rpx;
    }

    .toggle {
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }

    .btn {
        display: inline-block;
        width: 50rpx;
        height: 50rpx;
        line-height: 50rpx;
        border-radius: 50%;
        text-align: center;
    }

    .label {
        top: -10rpx;
        right: -4rpx;
    }

    .notSelected {
        background: #f6f6f6 !important;
        border: 1rpx solid #eee;
    }
</style>